<template>
    <div class="customer-set-nickname">
        <van-nav-bar title="修改昵称" :border="false"
                     left-arrow fixed placeholder right-text="确定"
                     @click-left="$router.back()" @click-right="$refs.nicknameForm.submit()"/>
        <white-space/>
        <van-form ref="nicknameForm" @submit="handleChangeNickname">
            <van-field :border="false" label="昵称" name="nickname" placeholder="请填写昵称"
                       :rules="[{ required: true, message: '昵称不能为空' }]"
                       v-model="nicknameValue"/>
        </van-form>
    </div>
</template>

<script>
  import Empty from "../../components/Empty"
  import WhiteSpace from "../../components/WhiteSpace"
  import { Button, Field, Form, NavBar, Toast } from "vant"

  import { customer } from "@mall/api-services"

  export default {
    name: "CustomerSetNickname",
    components: {
      Empty,
      WhiteSpace,
      [Button.name]: Button,
      [Field.name]: Field,
      [Form.name]: Form,
      [NavBar.name]: NavBar,
    },
    props: {
      id: String,
      nickname: String,
    },
    data() {
      return {
        nicknameValue: "",
      }
    },
    created() {
      this.nicknameValue = this.nickname
    },
    methods: {
      setCustomer(aCustomer) {
        customer.CustomerServiceV1.setCustomer(aCustomer)
          .then(newCustomer => this.customer = newCustomer)
          .then(() => Toast.success("设置成功"))
          .then(() => this.$router.back())
      },
      handleChangeNickname(values) {
        const { nickname } = values
        const aCustomer = new customer.Customer()
        aCustomer.id = this.id
        aCustomer.nickname = nickname
        this.setCustomer(aCustomer)
      },
    },
  }
</script>

<style lang="scss" scoped>
    .customer-set-nickname {

    }
</style>
